import './App.css';
import React from 'react'

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      count: 1
    }
    console.log("1 constructor");
  }
  shouldComponentUpdate() {
    console.log('3. shouldComponentUpdate 状态改变时，触发');
    return true; // 更新DOM,会触发render()
    // return false;  // 不更新DOM,不会触发render()
  }
  componentDidMount() {
    console.log("4. componentDidMount 挂载之后，组件渲染之后调用一次，可用于请求数据；");
  }
  componentWillUnmount() {
    console.log("5 componentWillUnmount 卸载组件之前");
  }
  componentDidUpdate() {
    console.log("6.componentDidUpdate ");
  }
  render() {
    console.log("2. render");
    return (

      <div>
        <h1>count: {this.state.count}</h1>
        <button onClick={() => {
          this.setState({
            count: this.state.count + 1
          })
        }}>+1</button>
      </div>
    )
  }
}

export default App;
